<template>
  <div class="page-container">
    <!-- 轮播图 -->
    <el-carousel height="400px" style="width: 100%; margin: 0;">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <img :src="item.imageUrl" alt="轮播图" style="width: 100%; height: 100%; object-fit: cover;">
      </el-carousel-item>
    </el-carousel>
    <!-- 课程分类 -->
    <el-row type="flex" justify="space-around" align="middle" style="margin-top: 10px;">
      <el-col :span="5">
        <div class="course-box" style="padding: 0; margin: 0;">
          <img src="./@/assets/人工智能.png" alt="人工智能" class="course-img">
          <h3>人工智能</h3>
          <p>人工智能通过自动化和智能化技术，提升效率、优化决策、创新服务，推动各行各业的发展。</p>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="course-box" style="padding: 0; margin: 0;">
          <img src="./@/assets/软件工程.png" alt="软件工程" class="course-img">
          <h3>软件工程</h3>
          <p>软件工程通过系统化、规范化的方法，确保软件的质量、可靠性和效率，支持复杂系统的开发和维护。</p>
        </div>
      </el-col>
    </el-row>
    <!-- 更多课程 -->
    <el-row type="flex" justify="space-around" align="middle" style="margin-top: 10px;">
      <el-col :span="5">
        <div class="course-box" style="padding: 0; margin: 0;">
          <img src="./@/assets/java.png" alt="Java" class="course-img">
          <h3>Java</h3>
          <p>Java是一种广泛使用的编程语言，广泛用于开发企业级应用、Web应用和移动应用等。</p>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="course-box" style="padding: 0; margin: 0;">
          <img src="./@/assets/数据结构与算法.png" alt="数据结构与算法" class="course-img">
          <h3>数据结构与算法</h3>
          <p>数据结构和算法是计算机科学的基础，用于解决各种复杂的计算问题。</p>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="course-box" style="padding: 0; margin: 0;">
          <img src="./@/assets/操作系统.png" alt="操作系统" class="course-img">
          <h3>操作系统</h3>
          <p>操作系统是管理计算机硬件和软件资源的系统软件，提供用户和计算机硬件之间的接口。</p>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around" align="middle" style="margin-top: 10px;">
      <el-col :span="5">
        <div class="course-box" style="padding: 0; margin: 0;">
          <img src="./@/assets/数据库.png" alt="数据库" class="course-img">
          <h3>数据库</h3>
          <p>数据库是用于存储和管理数据的软件系统，广泛应用于企业、政府和科研等领域。</p>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="course-box" style="padding: 0; margin: 0;">
          <img src="./@/assets/C语言.png" alt="C语言入门" class="course-img">
          <h3>C语言入门</h3>
          <p>C语言是一种广泛使用的编程语言，常用于系统编程、嵌入式开发和游戏开发等领域。</p>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="course-box" style="padding: 0; margin: 0;">
          <img src="./@/assets/英语.png" alt="英语" class="course-img">
          <h3>英语</h3>
          <p>Hello world</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carouselItems: [
        { imageUrl: require('./@/assets/1.png') },
        { imageUrl: require('./@/assets/2.png') },
        { imageUrl: require('./@/assets/3.png') },
        { imageUrl: require('./@/assets/4.png') }
      ]
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style scoped>
.page-container {
  border: 1px solid #efe9e9;
  padding: 50px;
  max-width: 1600px;
  margin: 0 auto;
  background-color: #e0dfec;
}
.course-box {
  text-align: center;
  background-color: #dedbe6;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(160, 157, 162, 0.759);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}
.course-box:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}
.course-img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.el-carousel-item img {
  display: block;
}
.el-carousel {
  width: 100%;
}
</style>